<template>
  <div class="uni-video">
    <video
      class="my-video"
      :id="elementId"
      :muted="muted"
      preload="auto"
      :loop="loop"
      :poster="poster"
      width="100%"
      height="100%"
      object-fit="fill"
    >
     暂不支持该视频格式
      <source :src="videoUrl" object-fit="cover" :type="videoType"/>
    </video>
    <audio ref="bgAudioRef" :loop="loop" v-show="false">
      <source :src="bgAudio" type="audio/ogg" />
    </audio>
    <div class="video-mask" :style="{height: maskHeight}" v-if="showMask"></div>
  </div>
</template>

<script setup>
import { nextTick, onMounted,ref,defineProps,defineExpose, defineEmits } from "vue";

import bgAudio from "@/assets/audio/bg-audio.mp3"

import videoJs from "video.js"
import "video.js/dist/video-js.css"

const emits = defineEmits(["countPlay","talkOne","talkTwo","talkThree","talkFour","talkFive","playEnded","againPlay"])
const props = defineProps({
  poster:  {
    type: String,
    default: "",
  },
  videoUrl: {
    type: String,
    default: ""
  },
  elementId: {
    type: String,
    default: "my-video"
  },
  autoPlay: {
    type: Boolean,
    default: true
  },
  loop: {
    type: Boolean,
    default: true
  },
  isShowMask: {
    type: Boolean,
    default: false
  },
  muted: {
    type: Boolean,
    default: true
  },
  controls: {
    type: Boolean,
    default: false
  },
  height: {
    type: String,
    default: "100%"
  },
  maskHeight: {
    type: String,
    default: "980px"
  },
  videoType: {
    type: String,
    default: "application/x-mpegURL"
  },
  intoVideoType: {
    type: String,
    default: ""
  }
})

let myVideo = ref(null)
let showMask = ref(false)
let videoRef = ref(null)
let bgAudioRef = ref(null)
onMounted(() => {
  initVideo()
})

const playAudio = () => {
  bgAudioRef.value.play()
}
const pauseAudio = () => {
  bgAudioRef.value?.pause()
}

const initVideo = () => {
  nextTick(() => {
    myVideo.value = videoJs(props.elementId, {
      bigPlayButton: false,
      textTrackDisplay: false,
      posterImage: false,
      errorDisplay: false,
      controlBar: true,
      controls: true,
      restoreEl: true,
    })
    videoRef.value = document.querySelector(`#${props.elementId}_html5_api`)
    videoRef.value.style.height = props.height
    if(!props.loop) {
      listenerTimeupdate()
      videoRef.value.addEventListener("ended",() => {
        if(props.intoVideoType === "into") {
          videoRef.value.removeEventListener("timeupdate",() => {
            console.log("移除播放中监听")
          })
          emits("countPlay")
        } else {
          emits("againPlay")
          setTimeout(() =>{
            let playPromise = myVideo.value?.play()
            if (playPromise !== undefined) {
              playPromise.then(() => {
                play()
                playAudio()
                emits("countPlay")
              }).catch((err)=> {
                console.log("播放错误",err)
              })
            }
          },600)
        }
      })
    }
    // else {
    //   listenerTimeupdate()
    //   videoRef.value.addEventListener("ended",(event) => {
    //     console.log("监听到？")
    //     event.preventDefault();
    //     videoRef.value.removeEventListener("timeupdate",() => {
    //       console.log("移除播放中监听")
    //     })
    //   })
    // }
    if(props.autoPlay) {
      play()
      playAudio()
    }
  })
}

const listenerTimeupdate = () => {
  videoRef.value.addEventListener("timeupdate", (time) => {
    const currentTime = videoRef.value.currentTime
    // console.log("currentTime",currentTime)
    if(currentTime >=3 && currentTime < 4) {
      emits("talkOne")
    }
    if(currentTime >=16 && currentTime < 17) {
      emits("talkTwo")
    }
    if(currentTime >=32 && currentTime < 33.5) {
      emits("talkThree")
    }
    if(currentTime >=69 && currentTime < 70) {
      emits("talkFour")
    }
    if(currentTime >=99.5 && currentTime < 100) {
      emits("talkFive")
    }
  })
}

const clearListener = () => {
  videoRef.value.removeEventListener("play",() => {
    console.log("移除播放监听")
  })
  videoRef.value.removeEventListener("ended",() => {
    console.log("移除播放结束监听")
  })
}

const showMasks = () => {
  showMask.value = true
}
const closeMasks = () => {
  showMask.value = false
}

const pause = () => {
  myVideo.value?.pause()
}

const play = () =>{
  myVideo.value?.play()
}
const replay = () =>{
  myVideo.value?.currentTime(0);
  play()
}
const dispose = () =>{
  myVideo.value?.dispose()
}

defineExpose({
  initVideo,
  dispose,
  play,
  pause,
  replay,
  myVideo,
  showMasks,
  closeMasks,
  clearListener,
  playAudio,
  pauseAudio
})
</script>

<style lang="scss" scoped>
.uni-video {
  width: 100%;
  position: relative;
  perspective: 1500px;
}
.video-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,.3);
}
.my-video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  overflow: hidden;
  transform: rotateY(6.5deg) translateZ(0);
  overflow:hidden;
  transform-style: preserve-3d;
}
.vjs-tech {
  width: 100% !important;
  //height: 100% !important;
  object-fit: cover;
  transform: rotateY(6.5deg) translateZ(0);
  overflow:hidden;
}
:deep(.vjs-loading-spinner) {
  display: none;
}
:deep(.vjs-poster) {
  display: none;
}
:deep(.vjs-control-bar) {
  display: none;
  //position: absolute !important;
  //bottom: 20px !important;
}
</style>
